@charset "utf-8";
@import "../../../../layout/sass/_mixin-fun.scss";

body {
	background: #f6f6f6;
}

.area {
	width: 100%;
	margin-bottom: 20px;
	.inner {
		.block {
			float: left;
			width: 294px;
			height: 530px;
			margin-right: 8px;
			border-style: solid;
			border-width: 4px;
			border-left: none;
			border-right: none;
			background: white;
			position: relative;
			&.b1 {
				border-color: #f67726;
				> .title {
					background-color: #f67726;
				}
			}
			&.b2 {
				border-color: #7325f5;
				> .title {
					background-color: #7325f5;
				}
			}
			&.b3 {
				border-color: #de4a4a;
				> .title {
					background-color: #de4a4a;
				}
			}
			&.b4 {
				border-color: #24bdf6;
				margin-right: 0;
				> .title {
					background-color: #24bdf6;
				}
			}
			.img {
				width: 100%;
				height: 230px;
				img {
					display: block;
					width: 100%;
					max-height: 230px;
				}
			}
			> .title {
				position: absolute;
				top: 140px;
				left: 0;
				width: 100%;
				color: white;
				height: 88px;
				padding: 16px 16px 0 16px;
				h2 {
					font-size: 24px;
					margin: 0;
				}
				p {
					font-size: 18px;
				}
			}//title
			.box {
				width: 100%;
				overflow: hidden;
				position: relative;
				height: 292px;
				ul {
					width: 100%;
					height: 100%;
					position: relative;
					overflow: hidden;
					li {
						width: 294px;
						position: relative;
						float: left;
						height: 100%;
						background: white;
    					a {
    						display: block;
    						width: 100%;
    						height: 100%;
    						img {
	    						width: 198px;
	    						height: 198px;
	    						position: absolute;
	    						top: 50%;
	    						left: 50%;
	    						margin-left: -99px;
	    						margin-top: -120px;
	    					}
							p.title {
								width: 100%;
								text-align: center;
								color: #666;
								position: absolute;
								bottom: 30px;
								left: 0;
								font-size: 12px;
							}
    					}//a
					}//li
				}//ul
			}//box
			.btn {
				z-index: 3;
				width: 100%;
				position: absolute;
				bottom: 20px;
				left: 0;
				text-align: center;
				li {
					display: inline-block;
					width: 12px;
					height: 4px;
					background: #cacaca;
					color: white;
					margin: 5px;
					&.selected {
						background: #de4a4a;
					}
				}
			}//btn
		}//block
	}//inner
}//area

.add-banner {
	width: 100%;
	margin-bottom: 20px;
	.inner {
		height: 90px;
		img {
			max-width: 100%;
			max-height: 90px;
			margin: 0 auto;
			display: block;
		}
	}
}//add-banner

.hot {
	width: 100%;
	.inner {
		margin-top: 20px;
		margin-bottom: 20px;
		> .title {
			width: 100%;
			line-height: 60px;
			height: 60px;
			text-align: center;
			font-size: 26px;
			i {
				color: #de4a4a;
			}
		}
		> .bottom {
			width: 100%;
			background: white;
			border: 1px solid #dfdfdf;
			min-height: 324px;
			a.one-block {
				width: 20%;
				padding: 20px;
				display: block;
				float: left;
				cursor: pointer;
				overflow: hidden;
				position: relative;
				img {
					width: 200px;
					height: 200px;
					margin-bottom: 15px;
				}
				p.title {
					font-size: 14px;
					height: 20px;
					color: #666;
					margin-bottom: 10px;
					overflow: hidden;
					width: 100%;
				}
				p.bottom {
					line-height: 30px;
					.left {
						float: left;
						color: black;
						font-size: 16px;
						i {
							font-size: 20px;
						}
						em {
							font-size: 12px;
							color: #555;
						}
					}
					.right {
						float: right;
						font-size: 12px;
						color: #555;
						max-width: 55%;
						overflow: hidden;
						height: 30px;
					}
				}
				&:before {
			      content: "";
			      position: absolute;
			      width: 60px;
			      height: 324px;
			      top: 20px;
			      left: -110px;
			      overflow: hidden;
			      background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
			      background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
			      background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
			      background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
			      @include transform(skewX(-25deg));
			    }
			    &:hover {
			    	&::before {
				      @include transition(left, 1s);
				      left: 290px;
				    }
				    p.title {
				    	color: #de4a4a;
				    }
			    }
			}//block
		}//bottom
	}//inner
}//hot

.find-brand {
	width: 100%;
	margin-bottom: 20px;
	overflow: hidden;
	.inner {
		.box {
			overflow: hidden;
			width: 100%;
			position: relative;
			.slider {
				width: 5000px;
				height: 100px;
				position: relative;
				overflow: hidden;
				li {
					width: 1200px;
					float: left;
					position: relative;
					overflow: hidden;
					a {
						width: 149px;
						height: 100px;
						float: left;
						display: table;
						margin-right: 1px;
						background: white;
						text-align: center;
						vertical-align: middle;
						span {
							display: table-cell;
							vertical-align: middle;
							text-align: center;
							img {
								width: 80%;
								vertical-align: middle;
							}
						}
					}//a
				}//li
			}//slider
		}//box
		.plus, .minus {
			position: absolute;
		    background: gray;
		    background: rgba(0,0,0,.2);
		    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#32000000, endColorstr=#32000000);
		    color: #fff;
		    text-align: center;
		    font-size: 22px;
		    font-weight: 400;
		    font-family: simsun;
		    width: 24px;
		    height: 44px;
		    line-height: 44px;
		    top: 50%;
		    margin-top: -22px;
		    cursor: pointer;
		    visibility: hidden;
		    @include transition(opacity, 0.5s);
		    opacity: 0;
		    z-index: 1;
		    font-weight: 700;
		}
		.plus {
			right: 0;
		}
		.minus {
			left: 0;
		}
		&:hover {
			.plus, .minus {
				visibility: visible;
				opacity: 1;
			}
		}
	}//inner
}//find-brand

.floor {
	width: 100%;
	margin-bottom: 20px;
	.inner {
		min-height: 632px;
		> .title {
			 p {
			    height: 50px;
				line-height: 50px;
				border-bottom-width: 2px;
				border-bottom-style: solid;
				span {
					line-height: 45px;
				    font-size: 18px;
				    margin-left: 10px;
				    &.on {
						padding: 0 20px;
					    border-style: solid;
					    border-width: 4px;
					    border-top: none;
					    border-bottom: none;
					    margin-left: 0;
					    font-size: 16px;
					}
				}//span
			}//p
		}//title
		> .bottom {
			width: 100%;
			position: relative;
			background: white;
			> .left {
				width: 20%;
				height: 582px;
				float: left;
				overflow: hidden;
				will-change: transform;
				.bg {
					width: 100%;
					height: 384px;
					position: relative;
					overflow: hidden;
					will-change: transform;
					img {
						width: 100%;
						height: 384px;
						border: none;
						display: block;
						@include transition(transform, 0.5s);
					}
					&:hover {
						img {
							@include transform(scale(1.08));
						}
					}
				}
				.href {
					width: 190px;
					z-index: 2;
					margin: 20px auto;
					overflow: hidden;
					a {
						width: 50%;
						float: left;
						height: 57px;
						display: block;
						margin-bottom: 1px;
						text-align: center;
						position: relative;
						@include transition(opacity, 0.3s);
						overflow: hidden;
						&.sm {
							height: 30px;
							line-height: 30px;
							color: white;
						}
						img {
							width: 100%;
							height: 100%;
							@include transition(transform, 0.3s);
							&:hover {
								@include transform(scale(1.05));
							}
						}
						&.sm:hover {
							opacity: 0.8;
						}
					}//a
					.h1 {
						position: relative;
						.line {
							display: block;
							position: absolute;
							width: 1px;
							height: 100%;
							background: white;
							top: 0;
							left: 50%;
							margin-left: -0.5px;
							z-index: 1;
						}
					}
					.h2 {
						margin-top: 2px;
						width: 100%;
						height: 115px;
						overflow: hidden;
						position: relative;
						.line-y {
							position: absolute;
							width: 1px;
							height: 100%;
							background: rgba(239,239,239,1);
							top: 0;
							left: 50%;
							margin-left: -0.5px;
							display: block;
							z-index: 1;
						}
						.line-x {
							display: block;
							position: absolute;
							width: 100%;
							height: 1px;
							background: rgba(239,239,239,1);
							top: 50%;
							left: 0;
							margin-top: -0.5px;
							z-index: 1;
						}
					}
				}//href
			}//left
			> .right {
				width: 80%;
				height: 582px;
				float: left;
				> a, > div {
					width: 25%;
					float: left;
					height: 291px;
					display: block;
					padding: 0 1px;
					will-change: transform;
					position: relative;
					border: {
						left: 1px solid rgba(239,239,239,1);
						bottom: 1px solid rgba(239,239,239,1);
					}
					&.b-n {
						border-bottom: none;
					}
					img.main {
						width: 198px;
						height: 198px;
						display: block;
						margin: 20px auto;
						@include transition(opacity, 0.3s);
					}
					img.bg {
						width: 120px;
						height: 120px;
						position: absolute;
						bottom: 0;
						right: 0;
					}
					p.title {
						color: #555;
						width: 100%;
						padding-left: 20px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-bottom: 6px;
					}
					ul.list {
						width: 120px;
						height: 100%;
						padding-top: 15px;
						position: absolute;
						top: 0;
						left: 0;
						overflow: hidden;
						color: #555;
						text-align: center;
						h2 {
							font-size: 16px;
							margin-bottom: 10px;
						}
						li {
							height: 30px;
							line-height: 30px;
							text-align: center;
							a {
								color: #555;
							}
						}
					}
					p.bottom {
						padding: 0 20px;
						.left {
							float: left;
							max-width: 50%;
							color: #685244;
							overflow: hidden;
						}
						.right {
							float: right;
							max-width: 50%;
							color: #de4a4a;
							overflow: hidden;
							i {
								vertical-align: middle;
								margin-left: 5px;
								margin-top: -5px;
							}
						}
					}
					&:hover {
						img.main {
							opacity: 0.7;
							filter: Alpha(opacity=70);
						}
					}
				}//a
			}//right
		}//bottom
		> .bg-img {
			width: 100%;
			height: 582px;
			position: relative;
			img {
				width: 370px;
				height: 170px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -85px;
				margin-left: -185px;
			}
		}
	}//inner
}//floor

.bottom-other {
	width: 100%;
	margin-bottom: 20px;
	.inner {
		> .title {
			 p {
			    height: 50px;
				line-height: 50px;
				border-bottom-width: 2px;
				border-bottom-style: solid;
				color: #de4a4a;
				span {
					line-height: 45px;
				    font-size: 18px;
				    margin-left: 10px;
				    &.on {
						padding: 0 20px;
					    border-style: solid;
					    border-width: 4px;
					    border-top: none;
					    border-bottom: none;
					    margin-left: 0;
					    font-size: 16px;
					}
				}//span
			}//p
		}//title
		> .bottom {
			width: 100%;
			position: relative;
			background: white;
		}
	}
}

.floor-guide {
	width: 36px;
	overflow: hidden;
	position: fixed;
	top: 115px;
	display: none;
	z-index: 10;
	.block {
		width: 36px;
		height: 35px;
		position: relative;
		line-height: 36px;
		text-align: center;
		color: #555;
		cursor: pointer;
		border-bottom: 1px solid #e6e6e6;
		&:hover {
			p {
				display: block;
			}
			i.icon {
				display: none;
			}
		}
		p {
			display: none;
		}
		i.icon {
			position: absolute;
			top: 50%;
			left: 50%;
			&.floor-1 {
				background-position: -359px -1px;
				width: 17px;
				height: 15px;
				margin-left: -8.5px;
				margin-top: -6.5px;
			}
			&.floor-7 {
				background-position: -378px -4px;
				width: 20px;
				height: 10px;
				margin-left: -10px;
				margin-top: -3.5px;
			}
			&.floor-10 {
				background-position: -400px -4px;
				width: 19px;
				height: 11px;
				margin-left: -9.5px;
				margin-top: -4px;
			}
			&.floor-13 {
				background-position: -421px -5px;
				width: 19px;
				height: 9px;
				margin-left: -9.5px;
				margin-top: -2.5px;
			}
			&.floor-16 {
				background-position: -442px -4px;
				width: 19px;
				height: 10px;
				margin-left: -9.5px;
				margin-top: -3.5px;
			}
		}
	}//block
}//floor-guide

.bt-banner {
	width: 100%;
	border-top: 1px solid #CACACA;
	border-bottom: 2px solid $global-color;
	background: white;
	margin-top: 50px;
	.inner {
		img {
			width: 100%;
		}
	}
}

.footer {
	margin-top: 0;
}